<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vip页面</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1906880_rpx85mbn0g.css">
  <link rel="stylesheet" href="./css/publice.css">
  <link rel="stylesheet" href="./css/vip.min.css">
</head>

<body>
  <div class="vip-wrap">
    <!-- 选项卡导航 -->
    <div class="tag-box main-content">
      <div class="tag-item click active">
        <div class="img-icon">
          <img src="./images/tag-icon-3.png" alt="">
        </div>
        <div class="text-wrap">
          <h3>分类VIP</h3>
          <p>分类购买更实惠</p>
        </div>
      </div>
      <div class="tag-item click">
        <div class="img-icon">
          <img src="./images/tag-icon-2.png" alt="">
        </div>
        <div class="text-wrap">
          <h3>全站通VIP</h3>
          <p>全站通8000+视频不限次学习</p>
        </div>
      </div>
      <div class="tag-item click">
        <div class="img-icon">
          <img src="./images/tag-icon-1.png" alt="">
        </div>
        <div class="text-wrap">
          <h3>全站通终身VIP</h3>
          <p>终身学习全站所有会员教程</p>
        </div>
      </div>
    </div>

    <!-- 选项卡body -->
    <div class="tag-content-wrap main-content tag-content-wrap-1">
      <div class="btn-box">
        <a class="btn active" href="javascript:;">
          BIM土建VIP
        </a>
        <a class="btn" href="javascript:;">
          BIM土建VIP
        </a>
        <a class="btn" href="javascript:;">
          BIM土建VIP
        </a>
        <a class="btn" href="javascript:;">
          BIM土建VIP
        </a>
        <a class="btn" href="javascript:;">
          BIM土建VIP
        </a>
        <a class="btn" href="javascript:;">
          BIM土建VIP
        </a>
        <a class="btn" href="javascript:;">
          BIM土建VIP
        </a>

      </div>
      <div class="bottom">
        <div class="b-left">
          <div class="bl-title">
            成为VIP即可学习：
            <span>BIM土建</span>
            相关的所有课程
          </div>
          <div class="show-vip">
            <div class="icon">
              <img src="./images/tag-icon-3.png" alt="" class="auto-img">
            </div>
            <div class="v-name">
              BIM土建VIP
            </div>
            <div class="price">
              <span>599</span>
              元/年（不限次学习）
            </div>
          </div>
        </div>
        <div class="b-right">
          <div class="cz-text"> 选择充值方式：
            <span class="new-price">
              付款金额：<b>599/年</b>
            </span>
            <span class="old-price">（原价￥799）</span>
          </div>
          <div class="ops-wrap">

            <div class="ops-item">
              <div class="icon-wrap">
                <img src="./images/cz-wx.png" alt="">
              </div>
              <a class="btn" href="#">
                立即支付
              </a>
            </div>
            <div class="ops-item zfb">
              <div class="icon-wrap">
                <img src="./images/cz-zfb.png" alt="">
              </div>
              <a class="btn" href="#">
                立即支付
              </a>
            </div>

          </div>

        </div>


      </div>

    </div>
    <div class="tag-content-wrap main-content tag-content-wrap-2" hidden>
      <div class="options">
        <a class="options-item select" href="javascript:;">
          <div class="tips">
            推荐
          </div>
          <div class="ops-name">
            <div class="icon">
              <img src="./images/tag-icon-3.png" class=" img-auto" alt="">
            </div> 全站通VIP | 12个月
          </div>
          <div class="price-box">
            <div class="price-text">
              <span>1899</span>
              元/年（1年不限次学习）
            </div>
            <div class="desc">
              （全站视频课程+资源+素材不限次学习/下载）
            </div>

          </div>
        </a>

        <a class="options-item " href="javascript:;">
          <div class="tips">
            推荐
          </div>
          <div class="ops-name">
            <div class="icon">
              <img src="./images/tag-icon-3.png" class=" img-auto" alt="">
            </div> 全站通VIP | 24个月
          </div>
          <div class="price-box">
            <div class="price-text">
              <span>2899</span>
              元/年（2年不限次学习）
            </div>
            <div class="desc">
              （全站视频课程+资源+素材不限次学习/下载）
            </div>

          </div>
        </a>
      </div>

      <div class="bottom">
        <div class="cz-text"> 选择充值方式：
          <span class="new-price">
            付款金额：<b>599/年</b>
          </span>
          <span class="old-price">（原价￥799）</span>
        </div>
        <div class="ops-wrap">

          <div class="ops-item">
            <div class="icon-wrap">
              <img src="./images/cz-wx.png" alt="">
            </div>
            <a class="btn" href="#">
              立即支付
            </a>
          </div>
          <div class="ops-item zfb">
            <div class="icon-wrap">
              <img src="./images/cz-zfb.png" alt="">
            </div>
            <a class="btn" href="#">
              立即支付
            </a>
          </div>
        </div>

      </div>

    </div>



    <div class="tag-content-wrap main-content tag-content-wrap-3" hidden>
      <div class="options">
        <div class="options-item select">
          <div class="tips">
            推荐
          </div>
          <div class="ops-name">
            <div class="icon">
              <img src="./images/tag-icon-3.png" class=" img-auto" alt="">
            </div> 全站通VIP | 12个月
          </div>
          <div class="price-box">
            <div class="price-text">
              <span>1899</span>
              元/年（1年不限次学习）
            </div>
            <div class="desc">
              （全站视频课程+资源+素材不限次学习/下载）
            </div>

          </div>
        </div>
        <div class="rigth-text">
          <div class="text-title">
            全站通终身VIP尊贵特权
            <span>终身学习平台所有视频课程、素材、资源不限次学习/下载</span>
          </div>
          <ul>
            <li>1、一次性付费终身学习全站所有视频课程，想学就学，不受时间限制</li>
            <li>2、用有限金额购买终身不限次学习，超高性价比</li>
            <li>3、新增分类终身不限次学习</li>
          </ul>

        </div>
      </div>

      <div class="bottom">
        <div class="cz-text"> 选择充值方式：
          <span class="new-price">
            付款金额：<b>599/年</b>
          </span>
          <span class="old-price">（原价￥799）</span>
        </div>


        <div class="ops-wrap">

          <div class="ops-item">
            <div class="icon-wrap">
              <img src="./images/cz-wx.png" alt="">
            </div>
            <a class="btn" href="#">
              立即支付
            </a>
          </div>
          <div class="ops-item zfb">
            <div class="icon-wrap">
              <img src="./images/cz-zfb.png" alt="">
            </div>
            <a class="btn" href="#">
              立即支付
            </a>
          </div>

        </div>

      </div>

    </div>


    <!-- 各类vip对比 -->
    <div class="contrast main-content">
      <h2 class="title">
        <div class="icon"></div>
        <div>各类VIP特权对比</div>
        <div class="icon"></div>
      </h2>

      <div class="list-warp">
        <div class="list-item">
          <div class="top-bar">
            <div class="v-name">分类VIP</div>
            <div class="price">
              <span>599</span>
              元/年
            </div>
            <div class="desc">
              <p>购买分类VIP</p>
              <p>可观看对应分类下的视频课程</p>
            </div>
          </div>
          <ul>
            <li>对应分类视频课程不限次数</li>
            <li>对应分类课程素材下载</li>
            <li>每周一练优先点评</li>
            <li>客服优先接待服务</li>
            <li>招聘栏目发布招聘</li>
            <li>优质岗位优先推荐</li>
            <li>APP端缓存视频</li>
            <li>会员QQ群解答</li>
            <li>线下/电话项目技术咨询</li>
            <li class="not">想学视频优先录制</li>
            <li class="not">新增分类不限次学</li>
            <li class="not">作品评改特权</li>
            <li>尊贵分类VIP身份标识</li>
          </ul>
          <div>
            <a class="btn" href="javascript:;">
              立即开通
            </a>
          </div>
        </div>

        <div class="list-item">
          <div class="top-bar">
            <div class="v-name">全站通VIP</div>
            <div class="price">
              <span>1899</span>
              元/年
            </div>
            <div class="desc">
              <p>一年内全站所有</p>
              <p>视频课程、素材、资源不限次数学习/下载</p>
            </div>
          </div>
          <ul>
            <li>对应分类视频课程不限次数</li>
            <li>对应分类课程素材下载</li>
            <li>每周一练优先点评</li>
            <li>客服优先接待服务</li>
            <li>招聘栏目发布招聘</li>
            <li>优质岗位优先推荐</li>
            <li>APP端缓存视频</li>
            <li>会员QQ群解答</li>
            <li>线下/电话项目技术咨询</li>
            <li class="not">想学视频优先录制</li>
            <li>新增分类不限次学</li>
            <li>作品评改特权</li>
            <li>尊贵分类VIP身份标识</li>
          </ul>
          <div>
            <a class="btn" href="javascript:;">
              立即开通
            </a>
          </div>
        </div>


        <div class="list-item">
          <div class="top-bar">
            <div class="v-name">全站通终身VIP</div>
            <div class="price">
              <span>4800</span>
              元/年
            </div>


            <div class="desc">
              <p>终身学习平台所有</p>
              <p>视频课程、素材、资源不限制下载</p>
            </div>
          </div>
          <ul>
            <li>对应分类视频课程不限次数</li>
            <li>对应分类课程素材下载</li>
            <li>每周一练优先点评</li>
            <li>客服优先接待服务</li>
            <li>招聘栏目发布招聘</li>
            <li>优质岗位优先推荐</li>
            <li>APP端缓存视频</li>
            <li>会员QQ群解答</li>
            <li>线下/电话项目技术咨询</li>
            <li>想学视频优先录制</li>
            <li>新增分类不限次学</li>
            <li>作品评改特权</li>
            <li>尊贵分类VIP身份标识</li>
          </ul>
          <div>
            <a class="btn" href="javascript:;">
              立即开通
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="vip-course main-content">
      <h2 class="title">年会员专属课程</h2>

      <div class="list">
        <a class="list-item click" href="javascript:;" target="_blank">
          <div class="img-wrap">
            <img src="http://photo.tuituisoft.com/portal/20210511/6099e79fedd93.jpg" alt="课程名字">
            <div class="year-vip-text">
              年会员专属
            </div>

          </div>
          <p class="name text-row-1">
            课程名字
            课程名字
            课程名字
            课程名字
            课程名字
          </p>
          <div class="count">
            <i class="iconfont icon-yonghu"></i> 3555人正在学习
          </div>
        </a>

      </div>

    </div>


    <div class=" faq">
      <div class="main-content">
        <div class="title">
          常见问题
        </div>

        <div class="meber-ques">
          <div class="meber-ques-item">
            <h4>1、月会员能看那些课程？</h4>
            <p>月会员只可以部分课程，除了有年标志外的课程外其余课程均可以看。</p>
          </div>
          <div class="meber-ques-item">
            <h4>2、怎么样才可以开通终生会员？</h4>
            <p> 只有已经是年会员的会员才可以升级为终生会员，在年会员期限内，你都可以直接升级为终生会员。
            </p>
          </div>
          <div class="meber-ques-item">
            <h4>3、可以开票吗？</h4>
            <p> 购买年会员和终生会员可以开具增值税普通发票或专用发票，需要开票在付款后联系网站客服即可，提交开票及邮寄资料。
            </p>
          </div>
          <div class="meber-ques-item">
            <h4>4、可以退款或更换课程吗？</h4>
            <p> 网站VIP及课程均属于虚拟产品，一经购买，将无法退款和更换，请各位用户悉知。
            </p>
          </div>
          <div class="meber-ques-item">
            <h4>5、关于会员价格问题？</h4>
            <p> 随着课程和资源及特权的增多，网站会每年调整一次价格，也会在活动期间进行促销优惠。
            </p>
          </div>
          <div class="meber-ques-item">
            <h4>6、可以共享账号么？</h4>
            <p> 共享账号存在风险，任何一个人违反使用规则，我们将封停账号，同时账号注册人可以随时修改密码。
            </p>
          </div>
          <div class="meber-ques-item">
            <h4>7、网站课程可以下载吗？</h4>
            <p>网站所有录播课程均只能在线观看，无法下载。</p>
          </div>
          <div class="meber-ques-item">
            <h4>8、开通一个年会员有效期如何计算？</h4>
            <p> 开通一个月会员的有效期是：从您开通会员当天开始，到明年同一时间截止。（例：2017/3/2
              15:00开通会员，有效期为：2017/3/2 15:00-2018/3/2 14:59）。
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>

  <script>
    ; (function () {
      let tagList = document.querySelectorAll('.tag-box .tag-item')
      let contentList = document.querySelectorAll('.tag-content-wrap')
      // tagList.forEach((item,))

      for (let i = 0; i < tagList.length; i++) {
        tagList[i].addEventListener('click', () => {
          for (let j = 0; j < tagList.length; j++) {
            tagList[j].classList.remove('active')
            contentList[j].style.display = 'none'
          }
          tagList[i].classList.add('active')
          contentList[i].style.display = 'block'

        })
      }

      const btnList = [
        {
          id: 1,
          btnText: 'BIM土建VIP',
          price: 599,
          oldPrice: 799,
        },
        {
          id: 2,
          btnText: 'BIM机电VIP',
          price: 599,
          oldPrice: 799,
        },
        {
          id: 3,
          btnText: 'BIM桥梁VIP',
          price: 599,
          oldPrice: 799,
        },
        {
          id: 4,
          btnText: 'BIM隧道VIP',
          price: 599,
          oldPrice: 799,
        },
        {
          id: 5,
          btnText: 'BIM后期动画VIP',
          price: 599,
          oldPrice: 799,
        },
        {
          id: 6,
          btnText: 'BIM一级VIP',
          price: 599,
          oldPrice: 799,
        },
        {
          id: 7,
          btnText: 'BIM二级建筑VIP',
          price: 599,
          oldPrice: 799,
        },
        {
          id: 8,
          btnText: 'BIM二级结构VIP',
          price: 599,
          oldPrice: 799,
        },

        {
          id: 9,
          btnText: 'BIM二级设备VIP',
          price: 599,
          oldPrice: 799,
        },
      ]
      let selectIndex = 0


      function renderWrap1() {
        let btnWrap = document.querySelector('.tag-content-wrap-1 .btn-box')

        let bottomBox = document.querySelector('.tag-content-wrap-1 .bottom')

        btnWrap.innerHTML = btnList.map((item, index) => {
          let classname = index === selectIndex ? 'btn active' : 'btn'

          return `<a class="${classname}" href="javascript:;">
                    ${item.btnText}
                  </a>`
        }).join('')

        let btnDomList = btnWrap.querySelectorAll('.btn')

        for (let i = 0; i < btnDomList.length; i++) {
          btnDomList[i].addEventListener('click', () => {
            for (let j = 0; j < btnDomList.length; j++) {
              btnDomList[j].classList.remove('active')
            }
            btnDomList[i].classList.add('active')

            bottomBox.innerHTML = `
                   <div class="b-left">
                      <div class="bl-title">
                        成为VIP即可学习：
                        <span>${btnList[i].btnText.replace('VIP', '')}</span>
                        相关的所有课程
                      </div>
                    <div class="show-vip">
                      <div class="icon">
                        <img src="./images/tag-icon-3.png" alt="" class="auto-img">
                      </div>
                      <div class="v-name">
                        ${btnList[i].btnText}
                      </div>
                      <div class="price">
                        <span>${btnList[i].price}</span>
                        元/年（不限次学习）
                      </div>
                    </div>
                  </div>
                  <div class="b-right">
                    <div class="cz-text"> 选择充值方式：
                      <span class="new-price">
                        付款金额：<b>${btnList[i].price}/年</b>
                      </span>
                      <span class="old-price">（原价￥${btnList[i].oldPrice}）</span>
                    </div>
                    <div class="ops-wrap">

                      <div class="ops-item">
                        <div class="icon-wrap">
                          <img src="./images/cz-wx.png" alt="">
                        </div>
                        <a class="btn" href="#url/${btnList[i].id}/">
                          立即支付
                        </a>
                      </div>
                      <div class="ops-item zfb">
                        <div class="icon-wrap">
                          <img src="./images/cz-zfb.png" alt="">
                        </div>
                        <a class="btn" href="#url/${btnList[i].id}/">
                          立即支付
                        </a>
                      </div>
                    </div>
                  </div>
            `
          })
        }
        btnDomList[0].click()

      }


      const yearOptions = [
        {
          time: 12,
          price: 1899,
          oldPrice: 2499,
          count: 1,
          id: 11
        },
        {
          time: 24,
          price: 2899,
          oldPrice: 4998,
          count: 2,
          id: 12
        },
      ]

      let index2 = 0

      function renderWrap2() {

        const box = document.querySelector('.tag-content-wrap-2')

        const opsList = box.querySelectorAll('.options-item')

        const bottomContent = box.querySelector('.bottom')

        for (let i = 0; i < opsList.length; i++) {
          opsList[i].addEventListener('click', () => {
            for (let j = 0; j < opsList.length; j++) {
              opsList[j].classList.remove('select')
            }
            opsList[i].classList.add('select')


            bottomContent.innerHTML = `<div class="cz-text"> 选择充值方式：
                              <span class="new-price">
                                付款金额：<b>${yearOptions[i].price}/${yearOptions[i].count}年</b>
                              </span>
                              <span class="old-price">（原价￥${yearOptions[i].oldPrice}）</span>
                            </div>
                            <div class="ops-wrap">

                              <div class="ops-item">
                                <div class="icon-wrap">
                                  <img src="./images/cz-wx.png" alt="">
                                </div>
                                <a class="btn" href="#${yearOptions[i].id}">
                                  立即支付
                                </a>
                              </div>
                              <div class="ops-item zfb">
                                <div class="icon-wrap">
                                  <img src="./images/cz-zfb.png" alt="">
                                </div>
                                <a class="btn" href="#${yearOptions[i].id}">
                                  立即支付
                                </a>
                              </div>
                            </div>`
          })
        }
        opsList[0].click()
      }

      renderWrap1()
      renderWrap2()

    })()

  </script>

</body>

</html>